<template>
  <div class="card">
      <div>
        <img :src="imgUrl" style="width:700px;height:400px;"/>
      </div>
      <div class="text">
        <p style="font-size:35px;font-weight: 700;">{{title}}</p>
        <p style="font-size:20px;font-weight: 600;">{{detail}}</p>
        <div style="margin-top:12%">
            <el-button round id="i">了解更多</el-button>
            <el-button round v-if="isShow">预约体验</el-button>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    props:{
        imgUrl:String,
        title:String,
        detail:String,
        isShow:Boolean
    }

}
</script>

<style scoped>
    .card{
        margin: 5% auto;
        width: 80%;
        background-color: #fff9f9;
        overflow: hidden;
        display: flex;
        box-shadow:0px 0px 20px #b1afaf;
    }
    .text{
        padding-top: 100px;
        padding-left: 50px;
    }
    #i{
       filter: invert(100%);
    }
</style>